<template>
  <div>
    <h1>我是爷爷组件</h1>
    <p>{{ count }}</p>
    <hr />
    <Parent></Parent>
  </div>
</template>

<script setup>
import Parent from "./Parent.vue";
import { provide, ref } from "vue";

// 通过provide和inject函数可以简便的实现跨级组件通讯
const count = ref(0);
provide("count", count);

// 数据谁提供，谁负责修改
const updateCount = (num) => {
  count.value += num;
};
provide("updateCount", updateCount);
</script>

<style lang="scss" scoped>
</style>